<template>
	<view class="u-page">
		<u--form :model="userForm" ref="form1" labelWidth="90">
			<u-form-item label="Id" borderBottom><u--input type="text" v-model="userForm.id" border="none" readonly></u--input></u-form-item>
			<u-form-item label="用户" borderBottom><u--input type="text" v-model="userForm.name" border="none" readonly></u--input></u-form-item>
			<u-form-item label="原来密码" prop="password" borderBottom required>
				<u--input type="password" v-model="userForm.password" border="none" placeholder="请输入原密码" clearable></u--input>
			</u-form-item>
			<u-form-item label="新的密码" prop="password2" borderBottom required>
				<u--input type="password" v-model="userForm.password2" border="none" placeholder="请输入新密码" clearable></u--input>
			</u-form-item>
			<u-form-item label="确认密码" prop="password22" borderBottom required>
				<u--input type="password" v-model="userForm.password22" border="none" placeholder="请输入新密码" clearable></u--input>
			</u-form-item>
		</u--form>
		<u-button type="primary" text="提交" @click="onSubmit"></u-button>
		<u-gap height="10"></u-gap>
		<u-button type="error" text="重置" @click="onReset"></u-button>
	</view>
</template>

<script>
import * as UserAPI from '@/api/user.js';
import { getStorageUser } from '@/utils/storage.js';
export default {
	data() {
		return {
			userForm: {
				id: null,
				name: '',
				password: '',
				password2: '', //新的密码
				password22: '' //确认密码
			},

			//规则:字母数字
			rules: {
				password: {
					type: 'string',
					required: true,
					pattern: /^[a-z0-9]{3,12}$/i,
					message: '3-12字符',
					trigger: ['blur', 'change']
				},
				password2: {
					type: 'string',
					required: true,
					pattern: /^[a-z0-9]{3,12}$/i,
					message: '3-12字符',
					trigger: ['blur', 'change']
				},
				password22: {
					type: 'string',
					required: true,
					pattern: /^[a-z0-9]{3,12}$/i,
					message: '3-12字符',
					trigger: ['blur', 'change']
				}
			}
		};
	},
	mounted() {
		let user = getStorageUser();
		this.userForm.id = user.id;
		this.userForm.name = user.name;
	},
	onReady() {
		// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
		this.$refs.form1.setRules(this.rules);
	},
	methods: {
		//处理提交保存
		onSubmit() {
			if (this.userForm.password2 != this.userForm.password22) {
				uni.showToast({
					title: '确认密码两次输入不一致！',
					icon: 'error'
				});
				return;
			}

this.$refs.form1
				.validate()
				.then(valid => {
					if (valid) {
						//注意传递过去的参数user的属性名
						let user = this.userForm;
						delete user.password22; //删除该临时的字段
						UserAPI.updatePwd(user).then(() => {
							uni.showToast({
								title: '密码更改成功！',
								icon: 'success'
							});
							setTimeout(() => {
								uni.navigateBack({
									delta:1,   //	url: '/pages/user/User'			
								});
							}, 1000);
						});
					}
				})
				.catch(() => {
					uni.$u.toast('校验失败');
				});
		},

		onReset() {
			this.$refs.form1.resetFields();
			setTimeout(() => {
				this.$refs.form1.clearValidate();
			}, 10);
		}
	}
};
</script>

<style lang="less" scoped></style>
